{% extends 'oratk_app/master.html' %}
{% block tag_left %}
    {% include 'oratk_app/tag_left_user.html' %}
{% endblock %}
{% block title %}
    <title>ORATK</title>
{% endblock %}
{% block userinfo %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h2 class="page-header">ORATK 自定义查询</h2>
        <form class="form-horizontal" action="{{ request.path }}" onsubmit="return validateForm()" method="post"
              target="_blank">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading form-inline">
                        <div>&nbsp 选择实例: &nbsp
                            <select class="form-control" name="conn_string" id="conn_string">
                                <option id="def">--请选择实例名--</option>
                                {% for i in instanceinfo_result %}
                                    <option id="a">{{ i.dbname }}={{ i.conn_string }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        &nbsp
                        <div> &nbsp 下方输入要查询的语句: &nbsp</div>
                    </div>
                    <div class="panel-body">
                        <div class="col-md-9 column">
                            <textarea type="text" class="form-control" name="sqltext" id="sqltext"
                                      style="height: 300px; resize: none"></textarea>
                        </div>
                        <div class="col-md-3  column">
                            <div style="margin: 25px"> &nbsp
                            </div>
                            <div>
                                <button type="button" class="btn btn-info" id="btSearch">查询(本页展示）</button>
                            </div>
                            &nbsp
                            <div>
                                <button type="submit" class="btn btn-info" id="btSearch_new">查询(新页展示）</button>
                            </div>
                            &nbsp
                            <div class="text-info">
                                <li>
                                    仅支持select 语句
                                </li>
                                <li>
                                    仅支持单条语句
                                </li>
                                <li>
                                    语句开始和结尾不能有注释
                                </li>
                                <li>
                                    查询结果不能超过500
                                </li>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading form-inline">
                    <div> &nbsp 查询结果: &nbsp</div>
                </div>
                <div class="panel-body">
                    <div class="col-md-12 column">
                        <div id="tab_detail" class="col-md-12"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="tab_detail"></div>

    </div>
{% endblock %}

{% block script %}
    <script>


        //新页展示
        function validateForm() {
            var select_conn = $('#conn_string').find("option:checked").attr("id")
            var sqltext_value = document.getElementById("sqltext").value
            sqltext = sqltext_value.replace(/\s*/g, "")
            check_select = sqltext.substring(0, 6).toUpperCase()
            if (select_conn == 'def') {
                alert('请选择实例')
                return false;
            } else if (sqltext == '') {
                alert('请输入查询sql')
                return false;
            }
            //校验是否为select语句
            else if (check_select != 'SELECT') {
                alert('请输入正确的sql')
                return false;
            }
        }

        //本页展示
        $('#btSearch').click(function () {
            var select_conn = $('#conn_string').find("option:checked").attr("id")
            var sqltext_value = document.getElementById("sqltext").value
            sqltext = sqltext_value.replace(/\s*/g, "")
            check_select = sqltext.substring(0, 6).toUpperCase()
            check_fenhao = sqltext.substr(sqltext.length - 1, 1)

            if (select_conn == 'def') {
                alert('请选择实例')
                return false;
            } else if (sqltext == '') {
                alert('请输入查询sql')
                return false;
            }
            //校验是否为select语句
            else if (check_select != 'SELECT') {
                alert('请输入正确的sql')
                return false;
            } else {
                //如果分号结尾，把分号去掉
                {#if (check_fenhao == ';') {#}
                {#    sqltext_value = sqltext_value.replace(/\s*$/g, '')#}
                {#    sqltext_value = sqltext_value.substr(0, sqltext_value.length - 1)}#}
                $.ajax({
                    type: "POST",
                    data: {
                        'conn_string': $('#conn_string').val(),
                        {#'sqltext': document.getElementById("sqltext").value,#}
                        sqltext: sqltext_value,
                        'submit_id': 2
                    },
                    url: "/oratk_app/oratk_query", //后台处理函数的url
                    cache: false,
                    dataType: "html",
                    success: function (result) {

                        $("#tab_detail").html(result);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);
                    },
                })
            }


        })


        //table 显示行号
        function indexFormatter(value, row, index) {
            return index + 1;
        }
    </script>
{% endblock %}